<template>
  <div class="exam-management-system">
    <!-- 顶部信息栏 -->
    <div class="top-info">
      <span class="info-item">培训班编号：{{ classId || "123456" }}</span>
      <span class="info-item">培训班名称：{{ className || "XXX" }}</span>
    </div>

    <!-- 搜索区域 -->
    <el-form
      :inline="true"
      :model="searchForm"
      class="search-form"
      label-width="80px"
    >
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="请输入姓名" style="width: 160px;" />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="searchForm.phone" placeholder="请输入手机号码" style="width: 160px;" />
      </el-form-item>
      <el-form-item label="证件编号">
        <el-input v-model="searchForm.idCard" placeholder="请输入证件编号" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="考试状态">
        <el-select v-model="searchForm.examStatus" placeholder="选择考试状态" style="width: 140px;">
          <el-option label="全部" value="" />
          <el-option label="已考试" value="已考试" />
          <el-option label="未考试" value="未考试" />
          <el-option label="考试中" value="考试中" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮栏 -->
    <div class="operation-buttons">
      <el-button type="primary" plain>导出</el-button>
      <el-button type="primary" plain @click="openExamInfoDialog" :disabled="!selection || selection.length === 0">考试信息</el-button>
      <el-button type="primary" plain>同步考试申报</el-button>
      <el-button type="primary" plain>同步考试结果</el-button>
      <el-button type="primary" plain>同步电子证书</el-button>
      <el-button type="primary" plain @click="openRemarkDialog" :disabled="!selection || selection.length === 0">学员备注</el-button>
      <el-button type="primary" plain @click="openNoticeDialog" :disabled="!selection || selection.length === 0">学员通知</el-button>
      <el-button type="primary" plain @click="handleRefresh">刷新</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      @selection-change="handleSelectionChange"
      style="width: 100%;"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="name" label="姓名" width="80" />
      <el-table-column prop="idCard" label="证件编号" width="180" />
      <el-table-column prop="gender" label="性别" width="60" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="company" label="单位名称" width="150" />
      <el-table-column prop="examType" label="作业种类" width="100" />
      <el-table-column prop="project" label="作业项目" width="100" />
      <el-table-column prop="examDate" label="考试日期" width="120" />
      <el-table-column prop="examStatus" label="考试状态" width="100" />
      <el-table-column prop="theoryScore" label="理论成绩" width="100">
        <template #default="scope">
          <span :style="{ color: scope.row.theoryScore === '合格' ? 'green' : 'red' }">
            {{ scope.row.theoryScore || '-' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="practiceScore" label="实操成绩" width="100">
        <template #default="scope">
          <span :style="{ color: scope.row.practiceScore === '合格' ? 'green' : 'red' }">
            {{ scope.row.practiceScore || '-' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="makeupDate" label="补考日期" width="120" />
      <el-table-column prop="makeupScore" label="补考成绩" width="100">
        <template #default="scope">
          <span :style="{ color: scope.row.makeupScore === '合格' ? 'green' : 'red' }">
            {{ scope.row.makeupScore || '-' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="certificateNo" label="证书编号" width="140" />
      <el-table-column prop="remark" label="备注" width="120" />
      <el-table-column label="操作" width="160" fixed="right">
        <template #default="scope">
          <el-button type="text" @click="openRemarkDialog(scope.row)">备注</el-button>
          <el-button type="text" @click="openNoticeDialog(scope.row)">通知</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      />
    </div>

    <!-- 考试信息弹窗（栅栏布局） -->
    <el-dialog
      title="考试信息"
      :visible.sync="examInfoDialogVisible"
      width="800px"
      @close="handleCloseExamInfo"
    >
      <el-form
        :model="examInfoForm"
        :rules="examInfoRules"
        ref="examInfoFormRef"
        label-width="120px"
        class="exam-info-form"
      >
        <!-- 第一行：作业种类和作业项目 -->
        <el-row :gutter="20" class="form-row">
          <el-col :span="12">
            <el-form-item label="作业种类" prop="examType">
              <el-select v-model="examInfoForm.examType" placeholder="请选择作业种类" style="width: 100%;">
                <el-option label="高处作业" value="highWork" />
                <el-option label="电工作业" value="electricalWork" />
                <el-option label="焊接与热切割" value="weldingWork" />
                <el-option label="制冷与空调" value="refrigerationWork" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业项目" prop="project">
              <el-select v-model="examInfoForm.project" placeholder="请选择作业项目" style="width: 100%;">
                <el-option label="登高架设作业" value="erectionWork" />
                <el-option label="高处安装维护拆除" value="highInstallation" />
                <el-option label="低压电工作业" value="lowVoltageWork" />
                <el-option label="高压电工作业" value="highVoltageWork" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行：考试时间和考试地点 -->
        <el-row :gutter="20" class="form-row">
          <el-col :span="12">
            <el-form-item label="考试时间" prop="examDate">
              <el-date-picker
                v-model="examInfoForm.examDate"
                type="datetime"
                placeholder="请选择考试时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试地点" prop="examLocation">
              <el-input v-model="examInfoForm.examLocation" placeholder="请输入考试地点" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行：理论和实操考试时间 -->
        <el-row :gutter="20" class="form-row">
          <el-col :span="12">
            <el-form-item label="理论考试时间" prop="theoryExamTime">
              <el-date-picker
                v-model="examInfoForm.theoryExamTime"
                type="datetime"
                placeholder="请选择理论考试时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实操考试时间" prop="practiceExamTime">
              <el-date-picker
                v-model="examInfoForm.practiceExamTime"
                type="datetime"
                placeholder="请选择实操考试时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行：理论和实操成绩 -->
        <el-row :gutter="20" class="form-row">
          <el-col :span="12">
            <el-form-item label="理论成绩" prop="theoryScore">
              <el-select v-model="examInfoForm.theoryScore" placeholder="请选择理论成绩" style="width: 100%;">
                <el-option label="合格" value="合格" />
                <el-option label="不合格" value="不合格" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实操成绩" prop="practiceScore">
              <el-select v-model="examInfoForm.practiceScore" placeholder="请选择实操成绩" style="width: 100%;">
                <el-option label="合格" value="合格" />
                <el-option label="不合格" value="不合格" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第五行：补考时间和补考成绩 -->
        <el-row :gutter="20" class="form-row">
          <el-col :span="12">
            <el-form-item label="补考时间" prop="makeupDate">
              <el-date-picker
                v-model="examInfoForm.makeupDate"
                type="datetime"
                placeholder="请选择补考时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="补考成绩" prop="makeupScore">
              <el-select v-model="examInfoForm.makeupScore" placeholder="请选择补考成绩" style="width: 100%;">
                <el-option label="合格" value="合格" />
                <el-option label="不合格" value="不合格" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第六行：证书编号 -->
        <el-row :gutter="20" class="form-row">
          <el-col :span="24">
            <el-form-item label="证书编号" prop="certificateNo">
              <el-input v-model="examInfoForm.certificateNo" placeholder="请输入证书编号" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第七行：备注 -->
        <el-row :gutter="20" class="form-row">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="examInfoForm.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入备注信息"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseExamInfo">取消</el-button>
        <el-button type="primary" @click="handleSubmitExamInfo">提交</el-button>
      </div>
    </el-dialog>

    <!-- 学员备注弹窗 -->
    <el-dialog
      :title="remarkDialogTitle"
      :visible.sync="remarkDialogVisible"
      width="500px"
      size="mini"
    >
      <el-form :model="remarkForm" class="remark-form">
        <el-form-item label="备注内容" label-width="80px">
          <el-input
            type="textarea"
            v-model="remarkForm.content"
            placeholder="请输入备注内容"
            rows="4"
            class="remark-textarea"
          />
        </el-form-item>
        <el-form-item label="备注历史" label-width="80px">
          <el-table
            :data="remarkHistory"
            border
            stripe
            size="mini"
            :cell-style="{ 'vertical-align': 'middle' }"
            style="width: 100%;"
          >
            <el-table-column prop="time" label="时间" align="center" width="160" />
            <el-table-column prop="person" label="备注人" align="center" width="100" />
            <el-table-column prop="content" label="备注" align="left" />
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" @click="remarkDialogVisible = false">取消</el-button>
          <el-button size="mini" type="primary" @click="submitRemark">提交</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 学员通知弹窗 -->
    <el-dialog
      title="发送学员通知"
      :visible.sync="noticeDialogVisible"
      width="500px"
    >
      <el-form :model="noticeForm" ref="noticeFormRef" :rules="noticeRules">
        <el-form-item label="通知标题" prop="title">
          <el-input v-model="noticeForm.title" placeholder="请输入通知标题"></el-input>
        </el-form-item>
        <el-form-item label="通知内容" prop="content">
          <el-input
            type="textarea"
            v-model="noticeForm.content"
            placeholder="请输入通知内容"
            rows="6"
          ></el-input>
        </el-form-item>
        <el-form-item label="发送范围">
          <el-radio-group v-model="noticeForm.range">
            <el-radio label="all">所有学员</el-radio>
            <el-radio label="selected">已选择学员</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noticeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitNotice">发送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ExamManagementSystem",
  data() {
    return {
      //父组件参数
      classId:"",
      className:"",
      // 搜索表单数据
      searchForm: {
        name: "",
        phone: "",
        idCard: "",
        examStatus: ""
      },

      // 表格数据
      tableData: [
        {
          id: "001",
          name: "张三",
          idCard: "110101199001011234",
          gender: "男",
          phone: "13800138000",
          company: "北京某某公司",
          examType: "电工作业",
          project: "低压电工作业",
          examDate: "2025-09-10",
          examStatus: "已考试",
          theoryScore: "合格",
          practiceScore: "合格",
          makeupDate: "",
          makeupScore: "",
          certificateNo: "Z20250001234",
          remark: ""
        },
        {
          id: "002",
          name: "李四",
          idCard: "310101199202025678",
          gender: "男",
          phone: "13900139000",
          company: "上海某某企业",
          examType: "高处作业",
          project: "登高架设作业",
          examDate: "2025-09-10",
          examStatus: "已考试",
          theoryScore: "合格",
          practiceScore: "不合格",
          makeupDate: "2025-09-20",
          makeupScore: "合格",
          certificateNo: "Z20250001235",
          remark: "需要加强实操训练"
        },
        {
          id: "003",
          name: "王五",
          idCard: "440101199503039012",
          gender: "女",
          phone: "13700137000",
          company: "广州某某集团",
          examType: "焊接与热切割",
          project: "熔化焊接与热切割",
          examDate: "2025-09-10",
          examStatus: "已考试",
          theoryScore: "不合格",
          practiceScore: "",
          makeupDate: "2025-09-20",
          makeupScore: "合格",
          certificateNo: "Z20250001236",
          remark: ""
        },
        {
          id: "004",
          name: "赵六",
          idCard: "510101199804043456",
          gender: "男",
          phone: "13600136000",
          company: "成都某某公司",
          examType: "制冷与空调",
          project: "制冷与空调设备运行操作",
          examDate: "2025-09-15",
          examStatus: "未考试",
          theoryScore: "",
          practiceScore: "",
          makeupDate: "",
          makeupScore: "",
          certificateNo: "",
          remark: "需提醒按时参加考试"
        },
        {
          id: "005",
          name: "孙七",
          idCard: "120101200005057890",
          gender: "女",
          phone: "13500135000",
          company: "天津某某企业",
          examType: "电工作业",
          project: "高压电工作业",
          examDate: "2025-09-15",
          examStatus: "考试中",
          theoryScore: "",
          practiceScore: "",
          makeupDate: "",
          makeupScore: "",
          certificateNo: "",
          remark: ""
        }
      ],

      // 分页数据
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 50
      },

      // 选中的数据
      selection: [],

      // 考试信息弹窗
      examInfoDialogVisible: false,
      examInfoForm: {
        examType: "",
        project: "",
        examDate: "",
        examLocation: "",
        theoryExamTime: "",
        practiceExamTime: "",
        theoryScore: "",
        practiceScore: "",
        makeupDate: "",
        makeupScore: "",
        certificateNo: "",
        remark: ""
      },
      examInfoRules: {
        examType: [{ required: true, message: "请选择作业种类", trigger: "change" }],
        project: [{ required: true, message: "请选择作业项目", trigger: "change" }],
        examDate: [{ required: true, message: "请选择考试时间", trigger: "change" }],
        examLocation: [{ required: true, message: "请输入考试地点", trigger: "blur" }]
      },

      // 学员备注弹窗
      remarkDialogVisible: false,
      remarkDialogTitle: "学员备注",
      remarkForm: {
        content: ""
      },
      remarkHistory: [
        { time: "2025-09-01 09:30", person: "管理员", content: "首次报名" },
        { time: "2025-09-05 14:20", person: "李老师", content: "已参加培训" }
      ],

      // 学员通知弹窗
      noticeDialogVisible: false,
      noticeForm: {
        title: "",
        content: "",
        range: "selected"
      },
      noticeRules: {
        title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入通知内容", trigger: "blur" }]
      }
    };
  },
  watch: {
    '$route.query.classId': {
      immediate: true,
      handler(newId) {
        const params = this.$route.params;
        this.classId = params.classId
        this.className = params.className
      }
    }
  },
  methods: {
    // 搜索和重置
    handleSearch() {
      console.log("搜索条件:", this.searchForm);
      // 实际应用中这里会调用API进行搜索
    },
    handleReset() {
      this.searchForm = {
        name: "",
        phone: "",
        idCard: "",
        examStatus: ""
      };
    },

    // 选择事件
    handleSelectionChange(selection) {
      this.selection = selection;
    },

    // 分页事件
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
      // 实际应用中这里会调用API加载数据
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      // 实际应用中这里会调用API加载数据
    },

    // 刷新
    handleRefresh() {
      this.$message.success("数据已刷新");
      // 实际应用中这里会调用API重新加载数据
    },

    // 考试信息弹窗
    openExamInfoDialog() {
      if (this.selection.length > 1) {
        this.$message.warning("请只选择一位学员进行操作");
        return;
      }

      // 初始化表单数据
      const student = this.selection[0];
      this.examInfoForm = {
        examType: student.examType || "",
        project: student.project || "",
        examDate: student.examDate ? `${student.examDate} 09:00:00` : "",
        examLocation: "",
        theoryExamTime: "",
        practiceExamTime: "",
        theoryScore: student.theoryScore || "",
        practiceScore: student.practiceScore || "",
        makeupDate: student.makeupDate ? `${student.makeupDate} 09:00:00` : "",
        makeupScore: student.makeupScore || "",
        certificateNo: student.certificateNo || "",
        remark: student.remark || ""
      };

      this.examInfoDialogVisible = true;
    },
    handleSubmitExamInfo() {
      this.$refs.examInfoFormRef.validate((valid) => {
        if (valid) {
          console.log("提交考试信息:", this.examInfoForm);
          // 实际应用中这里会调用API提交数据
          this.$message.success("考试信息提交成功");
          this.examInfoDialogVisible = false;
        }
      });
    },
    handleCloseExamInfo() {
      this.examInfoDialogVisible = false;
      this.$refs.examInfoFormRef.resetFields();
    },

    // 学员备注弹窗
    openRemarkDialog(row) {
      this.remarkDialogVisible = true;
      this.remarkForm.content = "";

      if (row.name !== undefined && row.name !== null && row.name !== '') {
        this.remarkDialogTitle = `学员 ${row.name} 的备注`;
      } else {
        this.remarkDialogTitle = `学员 ${this.selection[0].name} 的备注`;
      }
    },
    submitRemark() {
      if (!this.remarkForm.content.trim()) {
        this.$message.warning("请输入备注内容");
        return;
      }

      // 添加新备注到历史记录
      this.remarkHistory.unshift({
        time: new Date().toLocaleString(),
        person: "当前管理员",
        content: this.remarkForm.content
      });

      this.$message.success("备注添加成功");
      this.remarkForm.content = "";

      // 实际应用中这里会调用API保存备注
    },

    // 学员通知弹窗
    openNoticeDialog(row) {
      this.noticeDialogVisible = true;
      this.noticeForm = {
        title: "",
        content: "",
        range: row ? "selected" : "all"
      };

      // 实际应用中如果是单个学员，会默认选择该学员
    },
    submitNotice() {
      this.$refs.noticeFormRef.validate((valid) => {
        if (valid) {
          console.log("发送通知:", this.noticeForm);
          // 实际应用中这里会调用API发送通知
          this.$message.success("通知发送成功");
          this.noticeDialogVisible = false;
        }
      });
    }
  }
};
</script>

<style scoped>
.exam-management-system {
  padding: 15px;
  background-color: #fff;
  min-height: calc(100vh - 64px);
}

/* 顶部信息 */
.top-info {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.info-item {
  display: inline-block;
  margin-right: 25px;
  color: #333;
  font-weight: 500;
}

/* 搜索区域 */
.search-form {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

/* 操作按钮 */
.operation-buttons {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.operation-buttons .el-button { padding: 6px 10px; }
/* 分页 */
.pagination-container {
  margin-top: 15px;
  text-align: right;
}

/* 考试信息弹窗样式 */
.exam-info-form {
  padding: 10px 0;
}

.form-row {
  margin-bottom: 15px;
}

/* 弹窗样式 */
.remark-textarea {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .top-info {
    display: flex;
    flex-direction: column;
  }

  .info-item {
    margin-bottom: 5px;
  }

  .operation-buttons {
    justify-content: center;
  }

  .pagination-container {
    text-align: center;
  }

  /* 在小屏幕上自动调整为单列布局 */
  .el-col {
    width: 100% !important;
  }
}
</style>
